<template>
	<view class="container">
		<view class="head">
			<uni-icons type="back" size="25" @click="back"></uni-icons>
			<text>内容发表</text>
		</view>

		<view class="form-group">
			<text class="label">标题</text>
			<input v-model="post.title" class="input" type="text" placeholder="请输入标题" />
		</view>
		<view class="form-group">
			<text class="label">内容</text>
			<textarea v-model="post.content" class="textarea" placeholder="请输入内容" />
		</view>
		<view class="form-group">
			<text class="label">图片</text>
			<view class="image-upload">
				<image v-if="post.image" :src="previewImg" mode="aspectFill" class="image" @click="previewImage">
				</image>
				<view v-else class="add-image" @click="chooseImage">
					<text class="iconfont icon-add"></text>
				</view>
			</view>
		</view>
		<view class="form-group">
			<text class="label">标签</text>
			<scroll-view scroll-x="true">
				<view class="tags">
					<view v-for="(tag, index) in tags" :key="index" class="tag"
						:class="{ 'active': post.tag === tag.id }" @click="selectTag(tag.id)">
						{{ tag.name }}
					</view>
				</view>
			</scroll-view>
		</view>
		<button class="submit-button" @click="submitPost">发表</button>
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app"

	import {
		ref
	} from 'vue';

	onShow(() => {
		const userData = uni.getStorageSync('userInfo')
		post.value.author = userData.id
	});

	const post = ref({
		title: '',
		author: '',
		content: '',
		image: '',
		tag: '',
	});

	onShow(() => {
		getTagList()
	})

	function getTagList() {
		uni.request({
			url: 'http://localhost:8080/tag',
			method: 'GET',
			success: res => {
				tags.value = res.data.data
			},
			fail: () => {
				uni.showToast({
					title: "网络异常"
				})
			},
			complete: () => {}
		});
	}

	const tags = ref([])

	const back = () => {
		uni.navigateBack();
	}

	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				previewImg.value = res.tempFilePaths[0];
				uni.uploadFile({
					url: 'http://localhost:8080/upload',
					filePath: previewImg.value,
					name: 'file',
					success: (res) => {
						post.value.image = JSON.parse(res.data).data
					}
				})
			},
		});
	};

	const previewImg = ref('')

	const previewImage = () => {
		uni.previewImage({
			urls: [previewImg.value],
		});
	};

	const selectTag = (id) => {
		post.value.tag = id;
	};

	const submitPost = () => {
		uni.request({
			url: 'http://localhost:8080/post',
			method: 'POST',
			data: {
				title: post.value.title,
				author: post.value.author,
				content: post.value.content,
				image: post.value.image,
				tag: post.value.tag
			},
			success: res => {
				uni.showToast({
					icon: 'none',
					title: '发表成功'
				})
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			fail: () => {},
			complete: () => {}
		});
		// console.log('发帖数据：', post.value);
	};
</script>

<style scoped>
	.head {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FAFAFA;
		border-bottom: 2rpx #E6E6E6 solid;
	}

	.head text {
		padding: 10rpx;
		font-size: 35rpx;
	}

	.form-group {
		padding: 20rpx;
	}

	.label {
		font-size: 32rpx;
		color: #333;
	}

	.input {
		margin-top: 20rpx;
		width: 90%;
		height: 80rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.textarea {
		margin-top: 20rpx;
		width: 90%;
		height: 200rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.image-upload {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
	}

	.add-image {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #ddd;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 60rpx;
		color: #666;
	}

	.tags {
		white-space: nowrap;
		overflow-x: auto;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.tag {
		padding: 10rpx 20rpx;
		background-color: #f1f1f1;
		color: #333;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		cursor: pointer;
		display: inline-block;
		max-width: 100px;
		overflow: hidden;
	}

	.tag.active {
		background-color: #007bff;
		color: #fff;
	}

	.submit-button {
		width: 95%;
		height: 80rpx;
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 32rpx;
		cursor: pointer;
	}
</style>